<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品牌 </title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">添加</h3>
        </div>
        <div class="panel-body form-inline">
            <label for="">
                id: <input type="text" class="form-control" v-model="id">
            </label>
            <label for="">
                name: <input type="text" class="form-control" v-model="name" @keyup.f2="add">
            </label>
            <input type="button" value="添加" class="btn btn-primay" @click="add" >
            <label for="">
                根据关键字搜索: <input type="text" class="form-control" v-model="keywords" v-focus v-color>
            </label>
        </div>
    </div>
    <table class="table table-hover table-bordered table-striped">
        <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>ctime</th>
            <th>operation</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td></td>
        </tr>
        </tbody>
    </table>
</div>

</body>
<script>


    var vm = new Vue({
        el: '#app',
        data: {
            msg: '大家好哈哈哈哈，你们好啊。',
            id: '',
            name: '',
            keywords: '',
            list: []
        },
        methods: {
            add(){

            },
            delete(){

            },
            create(){ // 当vm实例的data和methods初始化完毕后，vm实例会自动执行created这个生命周期函数
              this.getAllList();
            },
            getAllList(){ // 获取所有的数据列表
                this.$http.get('http://vue.studyit.io/api/getprodlist').then(result => {
                    if(result.status === 0){
                        this.list = result.message;
                    }else{
                        alert('获取失败！')
                    }

                })
            },
            add(){
                this.$http.post('http://vue.study.io/api/addproduct', {name:this.name}, {emulateJSON: true})
                    .then(result =>{
                        if(result.body.status === 0){
                            this.getAllList();
                        }else{
                            alert('添加失败')
                         }
                    })
            }
        }

    })
</script>
</html>